<template>
    <el-form label-width="100px">
        <el-form-item label="SKU名称">
            <el-input placeholder="请输入SKU名称" v-model="skuParmas.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input placeholder="价格(元)" v-model="skuParmas.price"></el-input>
        </el-form-item>
        <el-form-item label="重量(g)">
            <el-input placeholder="重量(g)" v-model="skuParmas.weight"></el-input>
        </el-form-item>
        <el-form-item label="SKU属性">
            <el-input type="textarea" placeholder="SKU描述" v-model="skuParmas.skuDesc"></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form :inline="true" label-width="150px">
                <el-form-item v-for="(item) in attrArr" :key="item.id" :label="item.name" style="margin: 5px 5px;">
                    <el-select style="width: 240px" v-model="item.AttrOrAttrValue">
                        <el-option :value="`${item.id}:${attrValue.id}`" v-for="(attrValue) in item.cateporyAttrList" :key="attrValue.id" :label="attrValue.name" ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            
        </el-form-item>        
        <el-form-item label="销售属性">
            <el-form :inline="true" label-width="100px">
                <el-form-item v-for="(item) in saleArr" :key="item.id" :label="item.saleAttrName">
                    <el-select style="width: 240px;" v-model="item.saleAttrOrSaleAttrValue">
                        <el-option :value="`${item.id}:${saleAttr.id}`" v-for="(saleAttr) in item.spuSaleAttrValueList" :key="saleAttr.id" :label="saleAttr.saleAttrValueName"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片名称">
            <el-table border :data="imageArr" ref="table">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="图片">
                    <template #="{row}" >
                        <img :src="row.imgUrl" alt="" style="width: 100px;height: 100px;">
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="imgName"></el-table-column>
                <el-table-column label="操作">
                    <template #="{row}">
                        <el-button @click="setAttrImage(row)" type="primary" size="small">设置默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-button @click="save" type="primary">保存</el-button>
            <el-button @click="cancel" type="primary">取消</el-button>
        </el-form-item>
    </el-form>
    
</template>

<script setup lang='ts'>
import {reqAttr} from '@/api/product/attr'
import {reqSpuHasSaleAttr,reqSkuImage,reqAddSku} from '@/api/product/spu'
import type { SkuData,spuData,skuImageData,skuImageResponseData,SaleAttr,SaleAttrResponseData} from '@/api/product/spu/type';
import type { ResponseAttrData,ResponseCateproyAttr} from '@/api/product/attr/type';
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
let $emits=defineEmits(['changeScene'])
//平台属性
const attrArr=ref<ResponseAttrData[]>()
//销售属性
const saleArr=ref<SaleAttr[]>()
//照片数据
const imageArr=ref<skuImageData[]>()
//收集sk数据
let skuParmas=reactive<SkuData>({
    parentId:'',
    spuId:'',
    tmid:'',
    skuName:'',
    price:'',
    weight:'',
    skuDesc:'',
    skuAttrValueList:[],
    skuSaleAttrValueList:[],
    skuDefaultImg:'',
})
//表单实例
const table=ref()
const initSkuData=async (c1Id:string|number,c2Id:string|number,spu:spuData)=>{
    skuParmas=Object.assign(skuParmas,{
        parentId:'',
        spuId:'',
        tmid:'',
        skuName:'',
        price:'',
        weight:'',
        skuDesc:'',
        skuAttrValueList:[],
        skuSaleAttrValueList:[],
        skuDefaultImg:'',
    })

    skuParmas.parentId=spu.parentId
    skuParmas.spuId=(spu.id as number|string)
    skuParmas.tmid=spu.tmid
    // 发送请求获取属性及属性值
    let result:ResponseCateproyAttr=await reqAttr(c1Id,c2Id,spu.parentId) 
    //获取该spu拥有的销售属性
    let result1:SaleAttrResponseData=await reqSpuHasSaleAttr((spu.id as number))
    //获取该spu拥有的照片墙
    let result2:skuImageResponseData=await reqSkuImage((spu.id as number))
    console.log(result2);
    attrArr.value=result.data
    saleArr.value=result1.data
    imageArr.value=result2.data
    
    
}
//取消按钮回调
const cancel=()=>{
    $emits('changeScene',{flag:0,parmas:''})
}
//表单设置默认按钮
const setAttrImage=(row:skuImageData)=>{
    //排他
    //每次点击先清除全部勾选
    imageArr.value?.forEach((item:skuImageData)=>{
        table.value.toggleRowSelection(item,false)
    })
    //设置勾选
    table.value.toggleRowSelection(row,true)
    skuParmas.skuDefaultImg=(row.imgUrl as string)
    
}
//保存按钮
const save=async()=>{
    //将选择的平台属性及属性值存储到skuParmas
    skuParmas.skuAttrValueList=attrArr.value?.reduce((prev:any,next:any)=>{
        if(next.AttrOrAttrValue){
            let [attrId,valueId]=next.AttrOrAttrValue.split(":")
            prev.push({
                attrId:attrId,
                valueId:valueId
            })
            
        }
        return prev
    },[])
    //将选择的销售属性及销售属性值存储到skuParmas
    skuParmas.skuSaleAttrValueList=saleArr.value?.reduce((prev:any,next:any)=>{
        if(next.saleAttrOrSaleAttrValue){
            let [saleAttrId,saleAttrvalueId]=next.saleAttrOrSaleAttrValue.split(":")
            prev.push({
                saleAttrId:saleAttrId,
                saleAttrvalueId:saleAttrvalueId
            })  
        }
        return prev
    },[])

    //发送创建sku请求
    let result=await reqAddSku(skuParmas)
    if(result.code==200){
        ElMessage({
            type:'success',
            message:'保存成功'
        })
        $emits('changeScene',{flag:0,parmas:''})
    }else{
        ElMessage({
            type:'error',
            message:'保存失败'
        })
    }
    
}
//暴露子组件方法
defineExpose({initSkuData})
</script>

<style scoped lang='scss'>

</style>